<template>
  <view class="container">
    <!-- 蓝色头部区域 -->
    <view class="blue-header">
      <view class="navbar">
        <view class="back-btn" @click="onBack">
          <uni-icons type="left" size="24" color="#ffffff"></uni-icons>
        </view>
        <view class="title">汽车保养</view>
      </view>
    </view>

    <view class="white-content">
      <!-- 服务评价区域 -->
      <view class="order-info">
        <view class="info-row">
          <view class="info-top">服务评价</view>
          <view class="info-status">{{ orderNumber }}</view>
        </view>
        <view style="height: 7rpx;background-color: gainsboro; width: 90%;margin: 0 auto"></view>
        <view class="info">
          <view class="info-left">
            <image style="width: 200rpx;margin: 30rpx;" src="/static/my-item/汽车保养.png" mode="widthFix"></image>
          </view>
          <view class="info-right">
            <text>车百事汽车生活馆</text>
            <view class="star-container">
              <image 
                v-for="index in 5" 
                :key="index" 
                style="width: 40rpx; margin: 10rpx;" 
                src="/static/my-item/五星 拷贝 5@2x.png" 
                mode="widthFix"
              ></image>
            </view>
          </view>
        </view>
      </view>

      <!-- 评语输入区域 -->
      <view class="order-info">
        <view class="info-area">评语（0-299字）</view>
        <view class="uni-textarea">
          <textarea 
            placeholder-style="font-size:13rpx" 
            placeholder="请输入您的宝贵意见和建议" 
            v-model="comment"
            @input="handleInput"
            maxlength="299"
            auto-height
          />
        </view>
        <view class="word-count">已输入 {{ currentLength }}/299 字</view>
      </view>

      <!-- 照片上传区域 -->
      <view class="order-info">
        <view class="photo-title">照片（选填）</view>
        <view class="photo-upload">
          <view 
            class="upload-btn" 
            @click="chooseImage"
          >
      
            <text class="upload-text">上传照片</text>
          </view>
          <view class="images-list">
            <image 
              v-for="(img, idx) in images" 
              :key="idx" 
              :src="img" 
              class="uploaded-img"
              @longpress="deleteImage(idx)"
            ></image>
          </view>
        </view>
      </view>

      <!-- 提交按钮 -->
      <view class="submit-btn-container">
        <button class="submit-btn" @click="submitEvaluation">提交</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderNumber: '',
      comment: '', // 评语内容
      currentLength: 0, // 当前输入字数
      images: [] // 已上传的图片列表
    };
  },
  onLoad(options) {
    this.orderNumber = options.orderNumber;
  },
  methods: {
    onBack() {
      uni.navigateBack();
    },
    // 处理评语输入，更新字数统计
    handleInput(e) {
      this.comment = e.detail.value;
      this.currentLength = this.comment.length;
    },
    // 选择图片
    chooseImage() {
      uni.chooseImage({
        count: 9, // 最多选择9张
        sourceType: ['album', 'camera'], // 可从相册或相机选择
        success: (res) => {
          this.images = this.images.concat(res.tempFilePaths);
        }
      });
    },
    // 删除图片
    deleteImage(index) {
      uni.showModal({
        title: '提示',
        content: '确定要删除这张图片吗？',
        success: (res) => {
          if (res.confirm) {
            this.images.splice(index, 1);
          }
        }
      });
    },
    // 提交评价
    submitEvaluation() {
      if (!this.comment.trim()) {
        uni.showToast({
          title: '请输入评语',
          icon: 'none'
        });
        return;
      }
      // 这里可以添加提交到后端的逻辑，比如接口请求
      uni.showLoading({
        title: '提交中...'
      });
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        });
        // 提交成功后返回上一页
        setTimeout(() => {
          this.onBack();
        }, 1500);
      }, 1000);
    }
  }
};
</script>

<style>
.container {
  min-height: 100vh;
  background-color: rgb(245, 245, 245);
  display: flex;
  flex-direction: column;
}

.navbar {
  display: flex;
  align-items: center;
  padding: 2rpx 2rpx;
  position: relative;
}

.title {
  font-size: 38rpx;
  font-weight: 400;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.blue-header {
  position: relative;
  background-color: #007AFF;
  color: white;
  padding-bottom: 150rpx;
}

.white-content {
  position: relative;
  z-index: 10;
  flex: 4;
  width: 90%;
  background-color: #f5f5f5;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  margin-left: 45rpx;
  margin-top: -100rpx;
  padding-bottom: 150rpx;
}

.info {
  display: flex;
  background-color: white;
  transition: transform 0.2s;
}

.info-row {
  display: flex;
  align-items: center;
}

.info-top {
  font-weight: 600;
  margin-left: 15rpx;
  margin-right: 350rpx;
}

.info-status {
  color: rgb(255, 191, 175);
}

.info-text {
  margin-left: 30rpx;
  font-size: 16rpx;
}

.info-right {
  margin-top: 30rpx;
}

.order-info {
  position: relative;
  background-color: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
  transition: transform 0.2s;
  margin-bottom: 30rpx;
}

.uni-textarea {
  border: 1px solid #ddd;
  border-radius: 8rpx;
  padding: 15rpx;
  width: 100%;
  min-height: 150rpx;
  box-sizing: border-box;
}

.uni-textarea:focus {
  border-color: #007AFF;
  outline: none;
}

.word-count {
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.photo-title {
  font-size: 30rpx;
  margin-bottom: 20rpx;
}

.photo-upload {
  display: flex;
  flex-wrap: wrap;
}

.upload-btn {
  width: 120rpx;
  height: 120rpx;
  border: 1px dashed #ddd;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}

.upload-text {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.images-list {
  display: flex;
  flex-wrap: wrap;
}

.uploaded-img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}

.submit-btn-container {
  display: flex;
  justify-content: center;
  margin-top: 40rpx;
}

.submit-btn {
  width: 80%;
  background-color: #007AFF;
  color: #fff;
  border-radius: 40rpx;
  font-size: 32rpx;
  padding: 20rpx 0;
}

.star-container {
  margin-top: 10rpx;
}
</style>